<template>
	<view class="evaluate">
		<view class="header_box flex">
			<!-- <view :class="[navIndex == index ? 'all_box_active' : 'all_box','s24','family','f500','txtali']"
				v-for="(item,index) in navList" :key="index" @click="onActive(index)">
				{{item.name}}
			</view> -->
			<view class='all_box s24 family f500 txtali' :class="[navIndex == '' ? 'all_box_active' : '']"
				@click="onActive('')">
				全部评论({{statistics.total > 99 ? '99+' : statistics.total}})
			</view>
			<view class='all_box s24 family f500 txtali' :class="[navIndex == 'figure' ? 'all_box_active' : '']"
				@click="onActive('figure')">
				有图({{statistics.figure > 99 ? '99+' : statistics.figure}})
			</view>
			<view class='all_box s24 family f500 txtali' :class="[navIndex == 'good' ? 'all_box_active' : '']"
				@click="onActive('good')">
				好评({{statistics.good > 99 ? '99+' : statistics.good}})
			</view>
			<view class='all_box s24 family f500 txtali' :class="[navIndex == 'poor' ? 'all_box_active' : '']"
				@click="onActive('poor')">
				差评({{statistics.poor > 99 ? '99+' : statistics.poor}})
			</view>
		</view>
		<view class="content_box w100" v-for="(item,index) in commentList" :key="index" v-if="commentList.length > 0">
			<view class="content_header flexjus">
				<view class="flex">
					<view class="portrait_box">
						<image class="w100 h100" :src="item.user.avatar" mode=""></image>
					</view>
					<view class="name_box s22 family f500">
						{{item.user.nickname}}
					</view>
					<view class="pingfen_box flex">
						<view class="ping_fen" v-for="(value,values) in item.score" :key="values">
							<image class="w100 h100" src="/pages/filePages/static/star.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="date_box s22 family f500">
					{{get_date(item.createtime)}}
				</view>
			</view>
			<view class="pinlun_con s24 family f500 flexjus">
				<view class="">
					{{item.content}}
				</view>
				<view class="hf_txt" @click="comments(item.id)" v-if="identity == 3">
					回复评论
				</view>
			</view>
			<view class="pinlun_image_box flex">
				<view class="pinlun_img" v-for="(items,indexs) in item.images" :key="indexs"
					@click="onLook(items)">
					<image class="w100 h100 image" :src="items" mode="aspectFill"></image>
				</view>
			</view>
			<view v-if="item.merchant_reply!=null" class="sjhf_box s22 family f500">
				<!-- merchant_reply_username -->
				<text class="color_sjhf s24 family">商家回复：</text>{{item.merchant_reply==null?'':item.merchant_reply}}
			</view>
		</view>
		<view class="no_pinlun s36 familytow fblod txtali" v-if="commentList.length == 0">
			暂无评论
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="ipt_box flex">
				<input class="uni-input" v-model="iptval"  placeholder-class="s24" placeholder="快来给你的宝贝评价吧!" />
				<view class="fs s20 family f500 txtali" @click="submitComment">
					发送
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statistics: {},
				commentList: {},
				navList: [{
						name: '全部评价(99+)'
					},
					{
						name: '有图(10+)'
					},
					{
						name: '好评(82+)'
					},
					{
						name: '差评(1)'
					}
				],
				navIndex: '',
				id: null,
				pageNum: 1,
				totalNum: '',
				iptval: '',
				commentId: 0,
				shopId: 0,
				identity: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.shopId = option.shopid
			this.getData()
			this.identity = uni.getStorageSync('userInfo').identity
		},
		onReachBottom() {
			if (this.pageNum >= this.totalNum) {
				return;
			} else {
				this.pageNum++
				this.getData()
			}
		},
		methods: {
			// 提交商家回复评论
			submitComment() {
				this.$request({
					url: 'member/reply_msg',
					method: 'POST',
					data: {
						id: this.commentId,
						content: this.iptval,
						shop_id: this.shopId
					}
				}).then(res => {
					if(res.data.code == 1) {
						this.$wanlshop.msg('回复成功')
						this.$refs.popup.close()
						this.getData()
					} else{
						this.$wanlshop.msg(res.data.msg)
					}
				})
			},
			// 获取数据列表
			getData() {
				let that = this
				let data = {
					tag: that.navIndex,
					page: that.pageNum
				}
				if(that.id){
					data['id'] = that.id
				}else{
					data['shop_id'] = that.shopId
				}
				that.$request({
					url: 'product/comment',
					data
				}).then(res => {
					that.totalNum = res.data.data.comment.current_page;
					that.commentList = that.pageNum == 1 ? (res.data.data.comment.data ? res.data.data.comment
						.data : []) : that.commentList.concat(
						res.data.data.comment.data);
					that.statistics = res.data.data.statistics
				})
			},
			onLook(item) {
				let images = []
				images.push(item)
				uni.previewImage({
					urls: images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			comments(id) {
				this.$refs.popup.open('bottom')
				this.commentId = id
			},
			onActive(type) {
				this.navIndex = type
				this.getData()
			}
		}
	}
</script>

<style scoped lang="scss">
	.evaluate {
		overflow: hidden;
		.ipt_box {
			padding-top: 40upx;
			padding-bottom: 40upx;
			padding-left: 32upx;
			align-items: center;
			.uni-input {
				width: 500upx;
				height: 68upx;
				background: #FFFFFF;
				border-radius: 50upx;
				border: 2upx solid #333333;
				padding-left: 32upx;
			}
			.fs {
				width: 100upx;
				height: 52upx;
				background: #EBBE87;
				box-shadow: 0upx 0upx 8upx 2upx rgba(235, 190, 135,0.6);
				border-radius: 26upx;
				line-height: 52upx;
				color: #FFFFFF;
				margin-left: 20upx;
			}
		}
		.header_box {
			margin-top: 24upx;

			.all_box {
				height: 58upx;
				background: rgba(235, 135, 135, 0.1);
				border-radius: 30upx;
				border: 2upx solid #EB8787;
				color: #666666;
				line-height: 58upx;
				padding-left: 22upx;
				padding-right: 22upx;
				margin-left: 18upx;
			}

			.all_box_active {
				height: 58upx;
				background: rgba(235, 135, 135, 0.1);
				border-radius: 30upx;
				border: 2upx solid #EB8787;
				color: #EB8787;
				line-height: 58upx;
				padding-left: 22upx;
				padding-right: 22upx;
				margin-left: 18upx;
			}
		}

		.content_box {
			width: 682upx;
			margin-top: 64upx;
			border-bottom: 2upx solid #f4f4f4;
			padding-left: 34upx;
			padding-right: 32upx;
			padding-bottom: 20upx;

			.content_header {
				.portrait_box {
					width: 46upx;
					height: 46upx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #999999;
				}

				.name_box {
					color: #666666;
					margin-left: 18upx;
				}

				.pingfen_box {
					margin-left: 16upx;

					.ping_fen {
						width: 26upx;
						height: 26upx;
						margin-right: 6upx;
					}
				}

				.date_box {
					margin-top: 6upx;
				}
			}

			.pinlun_con {
				margin-top: 20upx;
				color: #666;
				.hf_txt {
					color: #E84C4C;
				}
			}

			.pinlun_image_box {
				margin-top: 20upx;
				flex-wrap: wrap;

				.pinlun_img {
					width: 210upx;
					height: 212upx;
					border-radius: 16upx;
					margin-right: 16upx;
					margin-bottom: 16upx;

					.image {
						border-radius: 16upx;
					}
				}
			}

			.sjhf_box {
				width: 622upx;
				background: #F4F4F4;
				border-radius: 16upx;
				margin-top: 20upx;
				padding: 28upx 32upx 26upx 32upx;

				.color_sjhf {
					color: #EBBE87;
				}
			}
		}

		.no_pinlun {
			color: #333;
			margin-top: 70%;
		}
	}
</style>
